<template>
  <!-- 查询条件表单 -->
  <el-form :inline="true" :model="queryParams" class="search-form">
    <el-form-item label="公司名称">
      <el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable />
    </el-form-item>
    <el-form-item label="入厂日期">
      <el-date-picker
          v-model="queryParams.entryTimeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item label="身份证号">
      <el-input v-model="queryParams.idCard" placeholder="请输入身份证号" clearable />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="queryParams.userName" placeholder="请输入姓名" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>

  <!-- 数据表格 -->
  <el-table :data="tableData" style="width: 100%" class="accessTable">
    <el-table-column fixed prop="perId" label="序号" width="120" />
    <el-table-column prop="userName" label="姓名" width="120" />
    <el-table-column prop="idCard" label="身份证号" width="300" />
    <el-table-column prop="userPhone" label="联系方式 " width="150" />
    <el-table-column prop="companyName" label="公司名称" width="300" />
    <el-table-column prop="workArea" label="工作区域" width="300" />
    <el-table-column prop="status" label="状态" width="120" />
    <el-table-column prop="icNo" label="IC卡编号" width="120" />
    <el-table-column prop="entryTime" label="入厂日期" width="120" />
    <el-table-column prop="endTime" label="结束日期" width="120" />
    <el-table-column prop="photoCount" label="照片数" width="120" />
    <el-table-column fixed="right" label="操作" width="200" >
      <template #default>
        <el-button link type="primary" size="small" @click="">
          Detail
        </el-button>
        <el-button link type="primary" size="small">Edit</el-button>
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage="queryParams.pageNum"
      v-model:pageSize="queryParams.pageSize"
      :page-sizes="[10, 20, 30, 40,50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { ref,reactive } from 'vue'
import axios ,{getServerUrl} from '../../util/axios.js'

const total=ref(0)
const tableData = ref([])
const id = ref(-1)
const pages = ref(0)

// 查询参数
const queryParams = reactive({
  companyName: '',
  entryTimeRange: [],
  idCard: '',
  userName: '',
  pageNum: 1,
  pageSize: 10
})

const initAccessList=async()=>{
  const params = {
    pageNum: queryParams.pageNum,
    pageSize: queryParams.pageSize,
    companyName: queryParams.companyName,
    idCard: queryParams.idCard,
    userName: queryParams.userName,
    // 处理日期范围
    entryTimeStart: queryParams.entryTimeRange?.[0],
    entryTimeEnd: queryParams.entryTimeRange?.[1]
  }

  // 删除空参数
  Object.keys(params).forEach(key => {
    if (params[key] === '' || params[key] === null || params[key] === undefined) {
      delete params[key]
    }
  })

  const res=await axios.get("api/out/list", {params})
  console.log(res)
  tableData.value = res.data.data.records;
  total.value = res.data.data.total;
  queryParams.pageSize = res.data.data.size;
  pages.value = res.data.data.pages;
  console.log("params:")
  console.log(params)
}
initAccessList();

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1
  initAccessList()
}

// 重置
const handleReset = () => {
  queryParams.companyName = ''
  queryParams.entryTimeRange = []
  queryParams.idCard = ''
  queryParams.userName = ''
  queryParams.pageNum = 1
  initAccessList()
}


// 分页
const handleSizeChange = (size: number) => {
  queryParams.pageSize = size
  initAccessList()
}

const handleCurrentChange = (num: number) => {
  queryParams.pageNum = num
  initAccessList()
}
</script>

<style scoped>
/* 表头居中 */
.accessTable .el-table__header th .cell {
  text-align: center !important;
}
</style>

